<template>
	<view>
		<view class="place-view">
			<view class="place-addres" v-if="addreing" @click="addRess()">
				+ 新增收货地址
			</view>
			<!-- 已选中收货地址 -->
			<view class="goods-address" v-if="!addreing" @click="addRess()">
				<view class="goods-address-left">
					<image src="../../static/coen/address.png" mode="widthFix"></image>
				</view>
				<view class="goods-address-in">
					<view>{{addressing.detailInfo}}</view>
					<view class="goods-address-name">
						<text>{{addressing.userName}}</text>
						<text>{{addressing.telNumber}}</text>
					</view>
				</view>
				<view class="goods-address-right">
					<image src="../../static/coen/jiantou.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="place-time">
				<image src="../../static/coen/times.png" mode="widthFix"></image>
				<text>立即送出</text>
			</view>
		</view>
		<!-- 菜单 -->
		<view class="place-view">
			<view>
				<block v-for="(item,index) in allorder" :key="index">
					<view class="order-view">
						<view class="order-img">
							<image :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="order-title">
							<text>{{item.input}}</text>
							<text>x{{item.amount}}</text>
						</view>
						<view class="order-price">
							单价:¥{{item.price}}
						</view>
					</view>
				</block>
			</view>
		</view>
		<!-- 配送费 -->
		<view class="place-view">
			<view class="Delivery">配送费：¥{{physical}}</view>
		</view>
		<!-- 高度 -->
		<view style="height: 140upx;"></view>
		<!-- 支付 -->
		<view class="payment">
			<view class="payment-left">
				<text>合计</text>
				<text>¥{{payment}}</text>
			</view>
			<view class="payment-right" @click="toPay()">
				去支付
			</view>
		</view>
		<!-- 提示组件 -->
		<HMmessages ref="HMmessages" @complete="HMmessages = $refs.HMmessages" @clickMessage="clickMessage">
		</HMmessages>
	</view>
</template>

<script>
	var {
		log
	} = console
	// 引入提示组件
	import HMmessages from "@/components/HM-messages/HM-messages.vue"
	// post
	import {
		publicing
	} from '../../api/api.js'
	// 地址
	import {
		wxpayingurl
	} from '../../api/request.js'
	export default {
		components: {
			HMmessages
		},
		data() {
			return {
				addreing: true,
				allorder: [],
				openid: '',
				payment: '',
				physical: Number,
				MerchantId: '',
				nameshop: '',
				logo: '',
				// 收货地址
				addressing: {},
				// 支付状态 1代表已支付
				flag: ''
			}
		},

		methods: {
			// 选择收货地址
			addRess() {
				wx.chooseAddress({
					success: (res) => {
						log(res)
						this.addressing = res
						this.addreing = false
					}
				})
			},

			// 去支付
			toPay() {
				if (this.addreing == true) {
					log('没有选择收货地址')
					let succ = '请选择收货地址'
					let ico = 'error'
					this.tIps(succ, ico)
					return false
				}
				log('可以支付')
				this.wxPay()
				uni.showToast({
					title: '支付成功',
					icon: 'loading',
					duration: 800000,
					mask: true
				});
				this.todeliver()
			},
			todeliver() {
				uni.navigateTo({
					url: '../deliver/deliver/deliver'
				})
			},
			// 微信支付
			async wxPay() {
				// 提示用户正在下单，防止用户多次点击下单按钮
				wx.showToast({
					title: '正在下单',
					icon: 'loading',
					duration: 200000,
					mask: true
				})
				// 搞定必填参数
				// 客户信息
				let peopleobj = {
					address: this.addressing.detailInfo,
					name: this.addressing.userName,
					iphone: this.addressing.telNumber
				}
				// 商家标识
				let merchantid = this.MerchantId
				// 截取商家标识字符串
				let ide = this.MerchantId.slice(0, 7)
				// 商家名称
				let commod = this.nameshop
				// 商家logo
				let logo = this.logo
				// 把要发送到后台的数据以对象形式存储
				let Paymentinfor = {
					type: 'placeOrder',
					peopleobj,
					arrinfo: this.allorder,
					merchantid,
					ide,
					commod,
					logo,
					useropenid: this.openid,
					payment: this.payment
				}
				log(Paymentinfor)
				// es6 :async await:异步编程同步化
				// 第一步：统一下单
				// await:等待
				let Placeorder = await this.placeOrder(Paymentinfor)
				// log(Placeorder.data.data)
			},


			// 第一步：统一下单
			placeOrder(Paymentinfor) {
				return new Promise((resolve, reject) => {
					publicing(wxpayingurl, Paymentinfor)
						.then((res) => {
							log('33')
							log(res)
							wx.hideToast()
							resolve(res)
						})
						.catch((err) => {
							log(err)
							wx.hideToast()
							reject('支付错误')
						})
				})
			},
			// 提示
			tIps(succ, ico) {
				this.HMmessages.show(succ, {
					icon: ico,
					fontColor: "#ffffff",
					iconColor: "#ffffff",
					background: "rgba(102,0,51,0.8)"
				})
			}
		},

		// 接收下单页面的路径数据
		onLoad(e) {
			log(e)
			let ordermen = JSON.parse(e.ide)
			log(ordermen)
			// 商品数据
			this.allorder = ordermen.allorder
			// openid
			this.openid = ordermen.openid
			// 支付的价格
			this.payment = ordermen.payment
			// 配送费
			this.physical = ordermen.physical
			// 商家标识
			this.MerchantId = ordermen.MerchantId
			// 商家名称
			this.nameshop = ordermen.nameshop
			// 商家logo
			this.logo = ordermen.logo
		}

	}
</script>

<style>
	@import '../../css/placeorder.css'
</style>
